<template>
  <article class="ar-content">
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-menu"></i>项目
        </el-breadcrumb-item>
        <el-breadcrumb-item>列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>-->
    <div style="line-height:40px">
      <div
        style="height:40px;width:40px;border-radius:100%;background:#BAD4EF;color:#fff;line-height:40px;text-align:center;display:inline-block"
      >
        <i class="el-icon-tickets"></i>
      </div>
      <span style="font-size:18px;font-weight:bold;color:#444;">&nbsp;项目列表</span>
    </div>
    <div class="handle-box">
      <!--<el-select placeholder="项目类型" class="handle-select mr10" v-model="selectType">
                <el-option :label="item.name" :value="item.value" v-for="(item, index) in projectType" :key="item.value"></el-option>
            </el-select>
            <el-select placeholder="项目进度" class="handle-select mr10" v-model="selectProgress">
                <el-option :label="item.name" :value="item.value" v-for="(item, index) in projectProgress" :key="item.value"></el-option>
            </el-select>
            <el-input placeholder="项目名称关键词" class="handle-input mr10" v-model="selectName"></el-input>
      <el-button type="primary" icon="search" @click="search">搜索</el-button>-->
      <el-button size="small" @click="showYearDialog">导出</el-button>
      <el-button size="small" @click="showAllYearDialog">全部导出</el-button>
    </div>
    <div class="card-list">
      <el-table
        :data="tabelData"
        :style="tableStyle"
        @selection-change="handleSelectionChange"
        ref="projectTabel"
        :row-style="rowClass"
        row-key="pkid"
        :border="true"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="名称" width="250"></el-table-column>
        <el-table-column prop="tzlx" label="投资类型" width="170"></el-table-column>
        <el-table-column prop="cumulative_investment" label="至上年底累计投资（万元）" width="170" header-align="left" align="right"></el-table-column>
        <el-table-column prop="reported_lxrjfs" label="项目联系人及方式" width="170"></el-table-column>
        <el-table-column prop="build_scale" label="项目内容"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <i
              class="el-icon-document caozuo"
              title="详情"
              @click="handDetail(scope.row.pkid)"
              style="width: 50px;height:30px;line-height:30px"
            >详情</i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-div">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-size="params.pagesize"
        :page-sizes="[10,100,1000,10000]"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="infoDisable"
      v-if="infoDisable"
      width="1280px"
      top="100px"
    >
      <project-info :projectId="pkid"></project-info>
    </el-dialog>
  </article>
</template>

<script>
import bus from "../../assets/bus.js";
import projectInfo from "./ProjectInfo.vue";
import { projectProgress } from "../tool/Global/app-config.js";
import { XJXQ } from "../../../static/config/config.js";
import {
  logoutToLogin,
  queryProjectdetail,
  deleteProjectdetail,
  exportProjects,
  uploadExcelData
} from "../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import { apiGetUserInfo } from "../tool/Global/app-login-module.js";
export default {
  created() {
    let height = document.body.clientHeight - 305;
    this.tableStyle = {
      height: height + "px",
      overflow: "auto",
      width: "100%"
    };
  },
  components: {
    projectInfo
  },
  data: function() {
    return {
      title: "",
      url: "",
      tabelData: [],
      rowClass: function(row, index) {
        return { cursor: "pointer" };
      },
      total: 0,
      params: {
        pagesize: 10,
        pageindex: 1
      },
      exportDisable: false,
      year: "",
      projDepartmentID: "",
      projDepartment: "",
      projCreatePersonID: "",
      projCreatePerson: "",
      userInfo: {},
      pkid: "",
      selectTions: [],
      infoDisable: false,
      isAdmin: false,
      allP: null,
      allExport: false,
      tableStyle: {}
    };
  },
  mounted: function() {
    this.busEvent();
    this.$nextTick(function() {
      let ref = this;
      this.getUser(function() {
        ref.getProjectsBy(function(result) {
          if (result.success) {
            ref.tabelData = result.data.datalist;
            ref.tabelData.forEach(function(item) {
              if (item.currentStage) {
                item.currentStage = projectProgress[item.currentStage - 1].name;
              }
            });
            ref.total = result.data.total;
          }
        });
      });
    });
  },
  methods: {
    busEvent() {
      let self = this;
      bus.$on("search", function(params) {
        for (var key in params) {
          self.params[key] = params[key];
        }
        self.params.pageindex = 1;
        self.getProjectsBy(function(result) {
          if (result.success) {
            self.tabelData = result.data.datalist;
            self.tabelData.forEach(function(item) {
              if (item.currentStage) {
                item.currentStage = projectProgress[item.currentStage - 1].name;
              }
            });
            self.total = result.data.total;
          }
        });
      });
    },
    handleCurrentChange(val) {
      this.params.pageindex = val;
      let ref = this;
      this.getProjectsBy(function(result) {
        if (result.success) {
          ref.tabelData = result.data.datalist;
          ref.tabelData.forEach(function(item) {
            if (item.currentStage) {
              item.currentStage = projectProgress[item.currentStage - 1].name;
            }
          });
          ref.total = result.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      let ref = this;
      ref.getProjectsBy(function(result) {
        if (result.success) {
          ref.tabelData = result.data.datalist;
          ref.tabelData.forEach(function(item) {
            if (item.currentStage) {
              item.currentStage = projectProgress[item.currentStage - 1].name;
            }
          });
          ref.total = result.data.total;
        }
      });
    },
    handDetail(pkid) {
      this.title = "项目详情";
      this.pkid = pkid;
      this.infoDisable = true;
      /*sessionStorage.setItem('projectId', pkid)
                this.$router.push({path:'/ProjectProgress',query:{
                    projectId:pkid
                }});*/
    },
    getProjectsBy(callback) {
      if (!this.isAdmin) {
        this.params.projExaminationOrg = this.projDepartment;
      }
      queryProjectdetail(this.params).then(function(result) {
        callback(result.data);
      });
    },

    handleSelectionChange(val) {
      this.selectTions = val;
    },
    showYearDialog() {
      if (this.selectTions.length) {
        var pkids = [];
        this.selectTions.forEach(function(item) {
          pkids.push(item.pkid);
        });
        exportProjects(pkids);
      } else {
        this.$message({ message: "请勾选导出的项目", type: "warning" });
      }
    },
    showAllYearDialog() {
      if (this.isAdmin) {
        var params = {
          projType: this.type ? this.type : null,
          currentStage: this.progress ? this.progress : null,
          name: this.name ? this.name : null
        };
      } else {
        var params = {
          projType: this.type ? this.type : null,
          currentStage: this.progress ? this.progress : null,
          name: this.name ? this.name : null,
          projExaminationOrg: this.projDepartment
        };
      }
      queryProjectdetail(params).then(function(result) {
        var data = result.data.data.datalist;
        var pkids = [];
        data.forEach(function(item) {
          pkids.push(item.pkid);
        });
        exportProjects(pkids);
      });
    },

    uploadChange(file, fileList) {
      var uploadFormData = new FormData();
      let ref = this;
      uploadFormData.append("projDepartmentID", this.projDepartmentID);
      uploadFormData.append("projDepartment", this.projDepartment);
      uploadFormData.append("projCreatePersonID", this.projCreatePersonID);
      uploadFormData.append("projCreatePerson", this.projCreatePerson);

      if (
        file.raw.type == "application/vnd.ms-excel" ||
        file.raw.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        uploadFormData.append("file", file.raw);
        uploadExcelData(uploadFormData).then(function(result) {
          if (result.data.success) {
            ref.$message({ message: "导入成功", type: "success" });
            ref.getProjectsBy(function(result2) {
              if (result2.success) {
                ref.tabelData = result2.data.datalist;
                ref.tabelData.forEach(function(item) {
                  if (item.currentStage) {
                    item.currentStage =
                      projectProgress[item.currentStage - 1].name;
                  }
                });
                ref.total = result2.data.total;
              }
            });
          } else {
            ref.$message.error(result.data.message);
          }
        });
        //params.file = file.raw;
        //uploadExcelData(params);
      } else {
        this.$message.error("只允许导入excel文件");
      }
    },
    //监测用户是否已经登陆，获取用户信息
    getUser(callback) {
      let self = this;
      apiGetUserInfo()
        .then(res => {
          let userInfo = res.data.user;
          if (userInfo.status) {
            var bol = false;
            // console.log(YanAnAPP.managerId, userInfo.sys_role, 999);
            YanAnAPP.managerId.every(function(item) {
              if (userInfo.sys_role == item) {
                bol = true;
                return false;
              }
            });
            if (bol) {
              self.projDepartmentID = userInfo.sys_role;
              self.projDepartment = userInfo.sys_role;
              self.projCreatePersonID = userInfo.userid;
              self.projCreatePerson = userInfo.userCaption;
              self.userInfo = userInfo;
              // for(let i = 0; i < YanAnAPP.adminId.length;i++){
              //     if(YanAnAPP.adminId==self.projDepartmentID){
              //         self.isAdmin = true;
              //     }
              // }
              if (YanAnAPP.adminId == self.projDepartmentID) {
                self.isAdmin = true;
              } else {
                self.isAdmin = false;
              }
              if (typeof callback == "function") {
                callback();
              }
            } else {
              self.$message.error("不是管理用户，请重新登录");
              logoutToLogin().then(function() {
                window.location.href =
                  GeoAPP.Sites.Cas +
                  "/logout?service=" +
                  XJXQ.LoginModuleConfig.loginUrl;
              });
            }
          } else {
            self.$message.error("请先登录");
            window.location.href = XJXQ.LoginModuleConfig.loginUrl;
          }
        })
        .catch(e => {
          self.$message.error("请先登录");
          window.location.href = XJXQ.LoginModuleConfig.loginUrl;
        });
    }
  }
};
</script>

<style scoped>
.ar-content {
  height: 100%;
  word-wrap: break-word;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  background: #f5f5f5;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
  margin-right: 10px;
}

.del-button {
  color: #fa5555;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-div {
  width: 340px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.card-list {
  overflow-y: auto;
  position: relative;
  margin-bottom: 10px;
}

.handle-box {
  /* margin-bottom: 20px; */
  margin-top: 15px;
  height: 40px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.pagination-div {
  text-align: right;
}
.importFile {
  display: inline-block;
  margin-left: 9px;
}
.caozuo:hover {
  color: #fff;
  background-color: #409eff;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #eee;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);*/
  border-radius: 2px;
  background: #f5f5f5;
}
</style>
<style>
.thColor {
  color: #409eff;
}
.el-table thead{
   color:#555 
}
.tableHead {
  text-align: center;
}
</style>
